<template>
  <div class="box">
    <el-row>
      <el-col :span="12"></el-col>
      <el-col :span="12">
        <div class="login_form">
          <h1
            style="font-size: 25px; font-weight: 600; color: #fff; height: 50px; line-height: 50px"
          >
            vue3后台管理系统
          </h1>
          <el-form
            :model="form"
            label-width="auto"
            style="max-width: 600px; margin-top: 10px"
            ref="ruleFormRef"
            :rules="rules"
          >
            <!-- http://192.168.150.71:5173 -->
            <el-form-item label="账号" prop="account">
              <el-input v-model="form.account" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm" style="width: 600px; margin-left: 55px"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import userlist from '@/json/login.json'
import { ElMessage, popperProps } from 'element-plus'
import { addDynamicRoutes } from '@/router/index'

const router = useRouter()
interface RuleForm {
  account: string
  password: string
}

const form = ref({
  account: 'admin',
  password: '123',
})

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})

const submitForm = async () => {
  try {
    await ruleFormRef.value?.validate()
    let flage = userlist.rolelist.find(
      (item: any) => item.username === form.value.account && item.password === form.value.password,
    )
    if (flage) {
      ElMessage({
        message: '登录成功',
        type: 'success',
      })
      localStorage.setItem('userInfo', JSON.stringify(flage))
      addDynamicRoutes()
      router.push('/layout')
    } else {
      ElMessage({
        message: '账号密码错误，请重新输入',
        type: 'error',
      })
    }
  } catch (error) {
    console.log('表单验证失败', error)
  }
}
</script>
<style lang="scss">
.box {
  width: 100%;
  height: 100vh;
  background-image: url('../../../public/bg.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  .el-row {
    flex: 1;
    .el-col {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .login_form {
        width: 80%;
        height: 40%;
        border-radius: 10px;
        background-color: #ece0e019;
        padding: 5px;
      }
    }
  }
}
</style>
